<template>
  <div>
    <el-container>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" active-text-color="#545c64" @select="handleSelect">
        <el-menu-item index="1"><span style="font-weight: bold;font-size: large">教学班</span></el-menu-item>
        <el-menu-item index="2"><span style="font-weight: bold;font-size: large">行政班</span></el-menu-item>
      </el-menu>
      <el-header v-if="ifShowFirstHeader" class="head">
        <el-card>
          <el-form :inline="true">
            <el-form-item>
              <template>
                <el-select
                  v-model="Type"
                  placeholder="请选择查询依据"
                  @change="saveType($event)"
                >
                  <el-option v-for="item in searchType" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </template>
            </el-form-item>
            <el-form-item v-if="classFlag">
              <template>
                <el-select
                  v-model="classIdMessage"
                  filterable
                  remote
                  clearable="true"
                  placeholder="请选择或输入班级"
                  @change="saveCid($event)"
                >
                  <el-option v-for="item in classList" :key="item.cid" :label="item.className" :value="item.cid" />
                  <div style="bottom: 0;width: 100%;background: #fff">
                    <el-pagination
                      small
                      :current-page="pageClass.pageNumClass"
                      :total="pageClass.totalSizeClass"
                      layout="prev, pager,next,total"
                      @current-change="handleCurrentChangeClass"
                    />
                  </div>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item v-if="studentFlag">
              <template>
                <el-select
                  v-model="studentIdMessage"
                  filterable
                  remote
                  clearable="true"
                  placeholder="请选择或输入学生"
                  @change="saveSid($event)"
                >
                  <el-option v-for="item in studentList" :key="item.sid" :label="item.childName" :value="item.sid" />
                  <div style="bottom: 0;width: 100%;background: #fff">
                    <el-pagination
                      small
                      :current-page="pageStudent.pageNumStudent"
                      :total="pageStudent.totalSizeStudent"
                      layout="prev, pager,next,total"
                      @current-change="handleCurrentChangeStudent"
                    />
                  </div>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item v-if="openingWeekFlag">
              <template>
                <el-input v-model="openingWeek" clearable="true" placeholder="请输入开班星期" />
              </template>
            </el-form-item>
            <el-form-item>
              <!--              <el-button type="primary" @click="getClassInfo">查询开班信息</el-button>-->
              <el-button icon="el-icon-search" type="primary" style="margin-left: -15px" @click="getClassInfo" />
            </el-form-item>
          </el-form>
        </el-card>
      </el-header>
      <el-main v-if="ifShowFirstMain">
        <el-card class="card">
          <el-table :data="tableData" style="width: 100%" stripe border>
            <el-table-column prop="className" label="班级名称">
              <template slot-scope="scope">
                {{ scope.row.className ? scope.row.className :'暂无' }}
              </template>
            </el-table-column>
            <el-table-column prop="openingWeek" label="开班星期" align="center">
              <template slot-scope="scope">
                {{ scope.row.openingWeek ? scope.row.openingWeek :'暂无' }}
              </template>
            </el-table-column>
            <el-table-column prop="classWeekday" label="上课时间" align="center">
              <template slot-scope="scope">
                <el-tag>{{ scope.row.classWeekday&&scope.row.classStartNum&&scope.row.classEndNum?'周'+scope.row.classWeekday+' '+'（第'+scope.row.classStartNum+'节至第'+scope.row.classEndNum+'节）':'暂无数据' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="currentNumber" label="班级人数" align="center">
              <template slot-scope="scope">
                {{ scope.row.currentNumber ? scope.row.currentNumber :'暂无' }}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="page.pageNum"
            :total="page.totalSize"
            style="margin-top: 10px;float: right;margin-bottom: 10px"
            layout="total,prev, pager, next, jumper"
            @current-change="handleCurrentChange"
          />
        </el-card>
      </el-main>
      <el-main v-if="ifShowSecondMain">
        <el-card>
          <el-table :data="secondTableData" style="width: 100%" stripe size="small">
            <el-table-column prop="className" label="班级名称" style="width: 20%">
              <template slot-scope="scope">
                {{ scope.row.className ? scope.row.className :'暂无' }}
              </template>
            </el-table-column>
            <el-table-column prop="teacherName" label="班主任" style="width: 25%">
              <template slot-scope="scope">
                <el-tag> {{ scope.row.teacherName ? scope.row.teacherName :'暂无' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="currentNumber" label="班级人数" style="width: 20%">
              <template slot-scope="scope">
                {{ scope.row.currentNumber ? scope.row.currentNumber :'暂无' }}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="pageSecond.pageNumSecond"
            :total="pageSecond.totalSizeSecond"
            style="margin-top: 10px;float: right;margin-bottom: 10px"
            layout="total,prev, pager, next, jumper"
            @current-change="handleCurrentChangeSecond"
          />
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getClass } from '../../../api/class'
import { getStudentList } from '../../../api/student'
import { getTeacherInfo } from '../../../api/teacher'

export default {
  name: 'Class',
  data() {
    return {
      ifShowSecondMain: false,
      ifShowFirstHeader: true,
      ifShowFirstMain: true,
      activeIndex: '1',
      cid: '',
      studentId: '',
      classIdMessage: '',
      studentIdMessage: '',
      studentList: [],
      classList: [],
      openingWeek: '',
      Type: '',
      classFlag: false,
      studentFlag: false,
      openingWeekFlag: false,
      chooseType: '',
      page: {
        pageNum: 1,
        pageSize: 10,
        totalPage: 0,
        totalSize: 0
      },
      pageClass: {
        pageNumClass: 1,
        pageSizeClass: 10,
        totalPageClass: 0,
        totalSizeClass: 0
      },
      pageStudent: {
        pageNumStudent: 1,
        pageSizeStudent: 10,
        totalPageStudent: 0,
        totalSizeStudent: 0
      },
      pageSecond: {
        pageNumSecond: 1,
        pageSizeSecond: 10,
        totalPageSecond: 0,
        totalSizeSecond: 0
      },
      tableData: [],
      secondTableData: [],
      List: [],
      searchType: [
        {
          id: '1',
          name: '班级'
        },
        {
          id: '2',
          name: '学生'
        },
        {
          id: '3',
          name: '开班星期'
        },
        {
          id: '4',
          name: '所有'
        }
      ]
    }
  },
  created() {
    this.getAllClass()
    this.getAllStudent()
    this.getDefultClass()
  },
  methods: {
    get_administrativeClass() { // 获取行政班
      getClass({
        classType: '0',
        pageNum: this.pageSecond.pageNumSecond,
        pageSize: this.pageSecond.pageSizeSecond
      }).then(async res => {
        // this.secondTableData = res.data.list
        this.List = res.data.list
        this.pageSecond.pageNumSecond = res.data.page.pageNum
        this.pageSecond.pageSizeSecond = res.data.page.pageSize
        this.pageSecond.totalPageSecond = res.data.page.totalPage
        this.pageSecond.totalSizeSecond = res.data.page.totalSize
        // 根据班级id获取该班班主任
        for (var i = 0; i < res.data.list.length; i++) {
          var id = this.List[i].headTeacherId
          await getTeacherInfo(id)
            .then(res => {
              this.teacher_Name = res.data.teacherName
              this.List[i].teacherName = this.teacher_Name
              // this.$message.success('请求班主任成功！')
            })
          // .catch(err => {
          //   this.$message.error('请求班主任失败！')
          // })
        }
        this.secondTableData = this.List
      })
    },
    handleSelect(key, keyPath) {
      if (key === '1') {
        this.ifShowSecondMain = false
        this.ifShowFirstHeader = true
        this.ifShowFirstMain = true
      } else if (key === '2') {
        this.ifShowFirstHeader = false
        this.ifShowFirstMain = false
        this.ifShowSecondMain = true
        this.get_administrativeClass()
      }
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      if (this.chooseType === '') {
        this.getDefultClass()
      } else {
        this.getClassInfo()
      }
    },
    handleCurrentChangeSecond(val) {
      this.pageSecond.pageNumSecond = val
      this.get_administrativeClass()
    },
    handleCurrentChangeClass(val) {
      this.pageClass.pageNumClass = val
      this.getAllClass()
    },
    handleCurrentChangeStudent(val) {
      this.pageStudent.pageNumStudent = val
      this.getAllStudent()
    },
    getDefultClass() { // 请求所有教学班
      getClass({
        classType: '1',
        classState: '2',
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize
      }).then(res => {
        this.tableData = res.data.list
        this.page = res.data.page
      })
    },
    getAllClass() {
      getClass({
        classType: '1',
        classState: '2',
        pageNum: this.pageClass.pageNumClass,
        pageSize: this.pageClass.pageSizeClass
      }).then(res => {
        this.classList = res.data.list
        this.pageClass.pageNumClass = res.data.page.pageNum
        this.pageClass.pageSizeClass = res.data.page.pageSize
        this.pageClass.totalPageClass = res.data.page.totalPage
        this.pageClass.totalSizeClass = res.data.page.totalSize
      })
    },
    getAllStudent() {
      getStudentList({
        pageNum: this.pageStudent.pageNumStudent,
        pageSize: this.pageStudent.pageSizeStudent
      }).then(res => {
        this.studentList = res.data.list
        this.pageStudent.pageNumStudent = res.data.page.pageNum
        this.pageStudent.pageSizeStudent = res.data.page.pageSize
        this.pageStudent.totalPageStudent = res.data.page.totalPage
        this.pageStudent.totalSizeStudent = res.data.page.totalSize
      })
    },
    getClassInfo() {
      if (this.chooseType === '1') {
        if (this.cid === '') {
          alert('请先选择班级！')
        } else {
          getClass({
            classType: '1',
            cid: this.cid,
            pageNum: this.page.pageNum,
            pageSize: this.page.pageSize
          }).then(res => {
            this.tableData = res.data.list
            this.page = res.data.page
            this.$message.success('请求成功！')
          })
        }
      } else if (this.chooseType === '2') {
        if (this.studentId === '') {
          alert('请先选择学生！')
        } else {
          getClass({
            classType: '1',
            studentId: this.studentId,
            classState: '2',
            pageNum: this.page.pageNum,
            pageSize: this.page.pageSize
          }).then(res => {
            this.tableData = res.data.list
            this.page = res.data.page
            this.$message.success('请求成功！')
            if (res.data.list.length === 0) {
              this.$message.info('该学生没有加入开班班级')
            }
          })
        }
      } else if (this.chooseType === '3') {
        if (this.openingWeek === '') {
          alert('请先输入开班星期！')
        } else {
          getClass({
            classType: '1',
            classState: '2',
            openingWeek: this.openingWeek,
            pageNum: this.page.pageNum,
            pageSize: this.page.pageSize
          }).then(res => {
            this.tableData = res.data.list
            this.page = res.data.page
            this.$message.success('请求成功！')
            if (res.data.list.length === 0) {
              this.$message.info('该开班星期下没有开班数据')
            }
          })
        }
      } else if (this.chooseType === '4') {
        getClass({
          classType: '1',
          classState: '2',
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize
        }).then(res => {
          this.tableData = res.data.list
          this.page = res.data.page
          this.$message.success('请求成功！')
          if (res.data.list.length === 0) {
            this.$message.info('没有开班数据')
          }
        })
      } else {
        alert('请先选择查询类型！')
      }
    },
    saveType(event) {
      this.chooseType = event
      if (this.chooseType === '1') {
        this.studentFlag = false
        this.openingWeekFlag = false
        this.classFlag = true
      } else if (this.chooseType === '2') {
        this.classFlag = false
        this.openingWeekFlag = false
        this.studentFlag = true
      } else if (this.chooseType === '3') {
        this.classFlag = false
        this.studentFlag = false
        this.openingWeekFlag = true
      } else if (this.chooseType === '4') {
        this.classFlag = false
        this.studentFlag = false
        this.openingWeekFlag = false
      }
    },
    saveCid(event) {
      this.cid = event
    },
    saveSid(event) {
      this.studentId = event
    }
  }
}
</script>

<style scoped>
  .head{
    padding:20px
  }
 .card{
   margin-top: 20px;
 }
</style>
